<template>
  <Layout>
    <div>
      <el-card
        shadow="never"
        style="min-height: 400px;margin-bottom: 20px;padding: 0px 0px 20px 0px"
      >
        <el-tabs v-model="active" type="card">
          <el-tab-pane
            :label="'粉丝 ' + 0"
            name="followers"
            style="padding: 5px"
          >
            <div v-if="0">
              <social-card />
            </div>
            <div
              style="min-height: 300px;margin-bottom: 20px;padding: 20px 0px 20px 0px;text-align: center"
              v-else
            >
              <font style="font-size: 30px;color:#dddddd ">
                <b>(￢_￢) 没有一个粉丝</b>
              </font>
            </div>
          </el-tab-pane>

          <el-tab-pane
            :label="'关注 ' + followings.length"
            name="following"
            style="padding: 5px"
          >
            <div v-if="followings">
              <social-card :list="followings" />
            </div>
            <div
              style="min-height: 300px;margin-bottom: 20px;padding: 20px 0px 20px 0px;text-align: center"
              v-else
            >
              <font style="font-size: 30px;color: #dddddd ">
                <b>(￢_￢) 没有一个关注</b>
              </font>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </Layout>
</template>

<page-query>
query {
	allFollowing {
    edges {
      node {
        name
        url
        avatar
      }
    }
  }
}
</page-query>

<script>
import SocialCard from '~/components/SocialCard.vue'

export default {
  name: 'SocialPage',
  metaInfo: {
    title: '社交圈'
  },
  data () {
    return {
      active: 'followers'
    }
  },
  computed: {
    followings () {
      return this.$page.allFollowing.edges.map(edge => edge.node)
    }
  },
  components: {
    SocialCard
  }
}
</script>

<style></style>
